<template>
  <div>
    <header>
      <div class="slogan">
        <hgroup>
          <h3>travel</h3>
          <h2>穷游 &nbsp; 生活</h2>
          <h3>致敬爱浪的你</h3>
        </hgroup>
      </div>
    </header>
    <div class="part2" style="background-color: #30a3e3">
      <el-row>
        <el-col>
          <h2 class="text-center h1">最新活动</h2>
          <p>
            写游记赢大奖，马尔代夫邀你免费五日游!马尔代夫全称：马尔代夫共和国（原名马尔代夫群岛，1969年4月改为现名）位于南亚，是印度洋上的一个岛国。由1200余个小珊瑚岛屿组成，其中202个岛屿有人居住。面积300平方公里，是亚洲最小的国家。
          </p>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-button>查看更多>></el-button>
        </el-col>
      </el-row>
    </div>
    <div class="part3">
      <el-row type="flex">
        <el-col :span="8" :xs="24" v-for="(item, index) in part_3" :key="index">
          <MaerFigure :src="item.src" :alt="item.name" style="height: 100%; padding-left: 15px; padding-right: 15px">
            <template slot="title">{{ item.name }}</template>
            <template slot="cont">{{ item.cont }}</template>
          </MaerFigure>
        </el-col>
      </el-row>
    </div>
    <div class="part4">
      <el-row>
        <el-col class="part4-title">
          <div>
            <h3 class="text-center">旅游特色</h3>
            <p class="text-center">TRAVELING SPECIALS</p>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="8" :xs="24" v-for="(item, index) in part_4" :key="index">
          <MaerFigureB :src="item.src" :alt="item.name">
            <template slot="title">{{ item.name }}</template>
            <template slot="cont">{{ item.cont }}</template>
          </MaerFigureB>
        </el-col>
      </el-row>
    </div>
    <footer>
      <el-row>
        <el-col :span="8" :xs="24">
          <h3>关于奖品</h3>
          <p>
            马尔代夫，上帝将眼泪留在了这里却让它更加晶莹和柔情，就好像浮在波上浪漫的梦。马尔代夫的风情总离不开“水”。马尔代夫，上帝将眼泪留在了这里却让它更加晶莹和柔情，就好像浮在波上浪漫的梦。
          </p>
        </el-col>
        <el-col :span="8" :xs="24">
          <h3>最新新闻</h3>
          <p>
            是休闲式度假村，拥有着马尔代夫的传统，同时与朴素、高雅亚洲风情配合得天衣无缝。这个度假村让您在马尔代夫享受到宁静舒适的服务。是休闲式度假村，拥有着马尔代夫的传统。
          </p>
        </el-col>
        <el-col :span="8" :xs="24">
          <h3>联系我们</h3>
          <ul>
            <li><i class="fa fa-map-marker"></i>：桂林电子科技大学</li>
            <li><i class="fa fa-phone"></i>: 666-3456</li>
            <li><i class="fa fa-envelope"></i>: 1787288097@qq.com</li>
          </ul>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <p class="col-sm-12">
            Copyright © 2019 桂林电子科技大学-卓严钊. All rights reserved.
          </p>
        </el-col>
      </el-row>
    </footer>
  </div>
</template>

<script>
import MaerFigure from "../MaerFigure.vue";
import MaerFigureB from "../MaerFigureB.vue";

export default {
  components: {
    MaerFigure,
    MaerFigureB,
  },
  data() {
    return {
      part_3: [
        {
          name: '天堂岛',
          src: require('../../assets/img/maerdaifu/tu_03.jpg'),
          cont: '天堂岛是马尔代夫非常著名的度假海岛，在马尔代夫岛屿分级中属于第六级。天堂岛坐落在北马累北环礁，距离马累国际...',
        },
        {
          name: '拉古娜岛',
          src: require('../../assets/img/maerdaifu/tu_05.jpg'),
          cont: '拉古娜岛只有度假行家才知道的拉古娜岛,是电影《青春珊瑚岛》和《重回蓝色珊瑚礁》的拍摄地。拉古娜岛虽遗世独，但海滨...',
        },
        {
          name: '玛娜法鲁岛',
          src: require('../../assets/img/maerdaifu/tu_07.jpg'),
          cont: '休闲式度假村，拥有着马尔代夫的传统，同时与朴素、高雅亚洲风情配合得天衣无缝。这个度假村让您在马尔代夫享受到宁静舒适的服务...',
        },
      ],
      part_4: [
        {
          name: '最新计划',
          src: require('../../assets/img/maerdaifu/part4-1.png'),
          cont: '天堂岛是马尔代夫非常著名的度假海岛，在马尔代夫岛屿分级中属于第六级。天堂岛坐落在北马累北环礁，距离马累国际...',
        },
        {
          name: '预计划',
          src: require('../../assets/img/maerdaifu/part4-2.png'),
          cont: '拉古娜岛只有度假行家才知道的拉古娜岛,是电影《青春珊瑚岛》和《重回蓝色珊瑚礁》的拍摄地。拉古娜岛虽遗世独，但海滨...',
        },
        {
          name: '自由计划',
          src: require('../../assets/img/maerdaifu/part4-3.png'),
          cont: '休闲式度假村，拥有着马尔代夫的传统，同时与朴素、高雅亚洲风情配合得天衣无缝。这个度假村让您在马尔代夫享受到宁静舒适的服务...',
        },
      ]
    }
  }
};
</script>

<style lang="less" scoped>
header {
  position: relative;
  background: url(../../assets/img/maerdaifu/maerdaifu_bg.jpg) no-repeat center
    center / cover;
  height: 660px;
  position: relative;
  color: #000;
  overflow: hidden;
  .slogan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 440px;
    height: 260px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    text-align: center;
    &::before,
    &::after {
      content: "";
      display: block;
      height: 100%;
      width: 40px;
      border: 1px solid #000;
    }
    &::before {
      border-right: none;
    }
    &::after {
      border-left: none;
    }
    h2 {
      position: relative;
      font-size: 70px;
      font-family: "hanbiao";
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        background-color: #000;
        border-radius: 50%;
      }
    }
    h3:nth-of-type(1) {
      text-transform: uppercase;
      font-size: 24px;
      letter-spacing: 2px;
    }
    h3:nth-of-type(2) {
      letter-spacing: 5px;
    }
  }
}

.part2 {
  .el-row {
    padding: 2vw 12vw;
    &:first-child {
      .el-col {
        h2 {
          font-weight: bold;
          color: #fff;
          font-size: 36px;
          text-align: center;
          margin: 20px 0 10px;
        }
        p {
          color: #fff;
          font-size: 18px;
          text-indent: 2em;
        }
      }
    }
    &:last-child {
      .el-col {
        .el-button {
          display: block;
          border-radius: 0;
          color: #fff;
          font-weight: bold;
          background-color: #1a7fb7;
          border: none;
          margin: auto;
          padding: 10px 16px;
          font-size: 18px;
          line-height: 1.3333333;
          &:hover {
            background-color: transparent;
            transform: scale(1.1);
          }
        }
      }
    }
  }
}

.part3 {
  padding: 30px 0;
  .el-row {
    margin: auto;
    max-width: 800px;
    flex-wrap: wrap;
    .el-col {
      margin: 10px 0;
    }
  }
}

.part4 {
  background-color: #eaf7ff;
  &::before {
    /* 背景小三角 */
    content: "";
    display: block;
    margin: auto;
    height: 0;
    width: 0;
    border-top: 15px solid #fff;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }
  .part4-title {
    & > div {
      padding: 0 20px;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      width: 200px;
      margin: auto;
      background-color: #eaf7ff;
    }
    &::after {
      content: "";
      display: block;
      height: 2px;
      margin: 30px 0;
      background-color: #80888a;
    }
    h3,
    p {
      font-weight: bold;
      color: #80888a;
      margin: 0;
    }
    h3 {
      font-size: 24px;
    }
  }
  .el-row:last-child {
    flex-wrap: wrap;
    max-width: 1000px;
    margin: auto;
    padding-bottom: 30px;
    color: #8c9594;
    .el-col {
      padding: 0 15px;
      margin: 15px 0;
    }
  }
}

footer {
  color: #fff;
  background-color: #30a3e3;
  .el-row:first-child {
    padding: 30px 10px 40px;
    max-width: 1000px;
    margin: auto;
    .el-col {
      margin: 15px 0;
      padding: 0 15px;
      box-sizing: border-box;
      h3 {
        font-weight: bold;
        margin-bottom: 10px;
        font-size: 24px;
      }
      ul {
        list-style: none;
        li {
          margin-bottom: 10px;
        }
      }
    }
  }
  .el-row:last-child {
    background-color: #146897;
    padding: 5px;
    font-size: 88%;
    line-height: 30px;
    text-align: center;
  }
}
</style>